<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/vue.js"></script>
    <script src="../js/elementUI.js"></script>
    <script src="../js/axios.js"></script>
</head>
<body>
    <div id="app">
        <!--搜索开始区域-->
        车位号:<el-input v-model="query.no" placeholder="请输入车位编号" style="width: 200px"></el-input>

        车位是否占用：
        <el-select v-model="query.used" placeholder="请选择占用状态">
            <el-option label="占用" value="1"></el-option>
            <el-option label="未占用" value="2"></el-option>
        </el-select>
        <el-button type="primary" size="mini" @click="initData()">搜索</el-button>
        <!--搜索的结束-->
        <el-button type="primary" size="mini" @click="toAddPage()">添加</el-button>
        <el-button type="danger" size="mini" @click="delMany()">删除</el-button>

        <el-dialog :title="mode.title" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-input v-model="form.id" type="hidden" autocomplete="off"></el-input>
                <el-form-item label="车位编号" :label-width="formLabelWidth">
                    <el-input v-model="form.no" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
            </div>
        </el-dialog>
        <el-table
                :data="pageInfo.list"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号">
            </el-table-column>
            <el-table-column
                    prop="no"
                    label="车位编号">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="是否占用">
                <template slot-scope="scope">
                    {{scope.row.used==1?'占用':'未占用'}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum"
                :page-sizes="[2, 200, 300, 400]"
                :page-size="pageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
        </el-pagination>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
          idArr:[],
          multipleSelection:[],
          //hobbyArr:[],
          mode:{
            title:"",
            url:""
          },
          formLabelWidth:"200px",
          //准备向后台提交的表单对象
          form:{
              no:"",
          },
          dialogFormVisible:false,//决定着弹窗是否弹起,true表示弹起,false表示不弹出
          pageInfo:{},
            //查询对象
          query:{
              pageNum:1,
              pageSize:2,
              no:"",
              used:"",
          }

        },
        methods:{
            //批删
            delMany(){
                //一个都没选
                if (this.idArr.length<1){
                    this.$message({
                        message: "请至少选中一条",
                        type: 'error'
                    });
                }else{
                    this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //点击确定
                        axios.post(`/park/delMany.do?idArr=${this.idArr}`).then(res=>{
                            if(res.data.code==0){
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.dialogFormVisible=false;
                                this.initData();
                            }else{
                                this.$message({
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }

                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            },
            //选中
            handleSelectionChange(val) {
                //先清空
                this.idArr=[];
                //将选中的数据存入数组(包含所有name...)
                this.multipleSelection = val;
                //只获取所有的id并存入idArr数组
                for (let i = 0; i <this.multipleSelection.length ; i++) {
                    this.idArr.push(this.multipleSelection[i].id)
                }
            },
            handleEdit(emp){
                //this.hobbyArr=emp.hobby.split(",");
                this.form=emp;
                //修改标题和请求路径
                this.mode.title="修改";
                this.mode.url="/park/updatePark.do";
                this.dialogFormVisible=true;
            },
            saveOrUpdate(){
                //将数组转换为字符串
                //this.form.hobby=this.hobbyArr.join(",");//[吃,乐] “吃,乐”
                //去添加或修改
                axios.post(this.mode.url,this.form).then(res=>{
                   if(res.data.code==0){
                       this.$message({
                           message: res.data.msg,
                           type: 'success'
                       });
                       this.dialogFormVisible=false;
                       this.initData();
                   }else{
                       this.$message({
                           message: res.data.msg,
                           type: 'error'
                       });
                   }

                })
            },
            toAddPage(){
                //清空表单
                this.form={};
                //修改标题和请求路径
                this.mode.title="添加";
                this.mode.url="/park/addPark.do";
                //弹窗弹出
                this.dialogFormVisible=true;
            },
            //当每页最多展示条数改变的时候会执行该方法 参数为页最多展示条数
            handleSizeChange(val) {
                this.query.pageSize=val;
                //重新查询
                this.initData();
            },
            //当页码改变的时候会执行该方法 参数为页码数
            handleCurrentChange(val) {
                //将新的当前页赋值
                this.query.pageNum=val;
                //重新查询
                this.initData();
            },
            initData(){
                axios.post(`/park/findParkList.do?pageNum=${this.query.pageNum}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.pageInfo=res.data;
                })
            }
        },
        created(){
            this.initData();
        }
    })
</script>
</html>